<!-- 放箱协议维护 -->
<template>
  <div class="boxag-reementmain">
    <!-- 查询 -->
    <el-form label-width="80px" :model="formData" size="mini" :inline="true" class="demo-form-inline">
      <el-row :gutter="15">
        <el-col :span="16">
          <el-button type="success" size="mini" @click="addBoxagReementmain()">新增</el-button>
        </el-col>
        <el-col :span="8">
          <div style="display: flex; justify-content: flex-end; height: 29px; margin-bottom: 20px;">
            <el-form-item>
              <el-input v-model="formData.searchMent" clearable @keyup.enter.native="searchBoxagReementmain()"></el-input>
            </el-form-item>
            <el-button type="primary" size="mini" @click="searchBoxagReementmain()">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
      border :data="tableData" style="width: 100%">
      <el-table-column
        align="center"
        label="议代码">
        <template slot-scope="scope">
          {{scope.row.protocolCode}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="260px"
        :show-overflow-tooltip="true"
        label="放箱公司">
        <template slot-scope="scope">
          {{scope.row.putBoxCompany}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :show-overflow-tooltip="true"
        label="地址">
        <template slot-scope="scope">
          {{scope.row.site}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :show-overflow-tooltip="true"
        label="电话">
        <template slot-scope="scope">
          {{scope.row.phone}}
        </template>
      </el-table-column>
      <el-table-column
        width="150"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="editBoxagReementmain(scope.row)"><i class="el-icon-edit"></i></el-button>
          <el-button
            size="mini"
            type="danger"
            @click="isSure(scope.row)"><i class="el-icon-delete"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加放箱协议 -->
    <add-agreement-dialog></add-agreement-dialog>
    <!-- 修改放箱协议 -->
    <edit-agreement-dialog :editForm="editForm" :oldProtocolCode="oldProtocolCode"></edit-agreement-dialog>
  </div>
</template>

<script>
import {
  agreementList,
  deleteAgreement
} from './api/revocationSummary'
import AddAgreementDialog from './dialog/AddAgreementDialog'
import EditAgreementDialog from './dialog/EditAgreementDialog'
export default {
  components: {
    AddAgreementDialog,
    EditAgreementDialog
  },
  data () {
    return {
      tableData: [],
      loading: true,
      formData: {
        searchMent: ''
      },
      oldProtocolCode: '',
      editForm: ''
    }
  },
  mounted () {
    this.getBoxagReementmain()
  },
  methods: {
    // 获取放箱协议
    async getBoxagReementmain () {
      this.loading = true
      const res = await agreementList({})
      if (res.status === 200) {
        this.tableData = res.data
        this.loading = false
      } else {
        this.loading = false
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 打开新增弹窗
    addBoxagReementmain () {
      this.$store.commit('show_add_agreement_dialog')
    },
    isSure (row) {
      this.$confirm(' 是否删除放箱协议?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delBoxagReementmain(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
        return false
      })
    },
    // 删除放箱协议
    async delBoxagReementmain (row) {
      const res = await deleteAgreement({
        protocolCode: row.protocolCode
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        this.getBoxagReementmain()
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 修改弹窗
    editBoxagReementmain (row) {
      this.editForm = JSON.stringify(row)
      this.oldProtocolCode = row.protocolCode
      this.$store.commit('show_edit_agreement_dialog')
    },
    // 搜索
    searchBoxagReementmain () {
      let search = this.formData.searchMent.toLowerCase()
      let arr = []
      if (search === '') {
        this.getBoxagReementmain()
        return false
      }
      this.tableData.map((item, index) => {
        for (let key in item) {
          if (item[key].toLowerCase().indexOf(search) !== -1) {
            arr.push(item)
          }
        }
      })
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i] === arr[j]) {
            arr.splice(j, 1)
            j--
          }
        }
      }
      this.tableData = arr
    }
  }
}
</script>

<style lang="less">
</style>
